<template>
  <!-- 外层容器处理用户设置的旋转角度 -->
  <div class="w-button-wrapper" :style="wrapperStyle">
    <!-- 内层元素处理动画 -->
    <button 
      class="w-button animated animate__animated" 
      :style="contentStyle" 
      v-on="formatEvent(eventObj)"
      :data-delay="delay" 
      :data-show="showClass" 
      :data-emphasis="emphasisClass" 
      :data-out="outClass"
      :data-emphasis-delay="emphasisDelay" 
      :data-out-delay="outDelay"
    >
      {{value}}
    </button>
  </div>
</template>

<script>
import element from '@/mixins/element'
import event from '@/mixins/event'

export default {
    props: {
        value: String,
        // 动画相关属性
        delay: {
            type: [Number, String],
            default: 0
        },
        showClass: {
            type: String,
            default: ''
        },
        emphasisClass: {
            type: String,
            default: ''
        },
        outClass: {
            type: String,
            default: ''
        },
        emphasisDelay: {
            type: [Number, String],
            default: 1000
        },
        outDelay: {
            type: [Number, String],
            default: 28000
        }
    },
    name: 'w-button',
    mixins: [element, event],
    computed: {
        wrapperStyle() {
            // 外层容器只处理旋转角度
            const { angel = 0, width = 0, height = 0, top = 0, left = 0, zIndex = 1 } = this.styleObj;
            const style = {
                transform: `rotateZ(${angel}deg)`,
                transformOrigin: 'center center',
                position: 'absolute',
                width: `${this.calcXAttr(width)}px`,
                height: `${this.calcYAttr(height)}px`,
                top: `${this.calcYAttr(top)}px`,
                left: `${this.calcXAttr(left)}px`,
                zIndex: zIndex
            };
            
            console.log('Button wrapper style:', style, 'angel:', angel);
            return style;
        },
        contentStyle() {
            // 内层元素处理除旋转外的其他样式
            const { 
                radius = 0, 
                fontSize = 16, 
                fontWeight = 'normal', 
                color = '#FFF', 
                backgroundColor = 'transparent', 
                animationCount = '1' 
            } = this.styleObj;
            
            const style = {
                color,
                fontWeight,
                backgroundColor,
                width: '100%',
                height: '100%',
                borderRadius: `${radius}px`,
                fontSize: `${this.calcXAttr(fontSize)}px`,
                'animation-iteration-count': `${animationCount}`
            }
            
            console.log('Button content style:', style);
            return style;
        }
    }
}
</script>

<style lang="scss" scoped>
.w-button-wrapper {
    transform-origin: center center;
}

.w-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    user-select: none;
    transform-origin: center center;
    border: none;
    width: 100%;
    height: 100%;
}
</style>